<template>
    <div>
        <div class="resource-manage">
            <div class="card-box" v-loading="loading">
                <div class="card-title">不动产证信息</div>
                <el-form ref="ruleForm" :model="formObj" class="form-wrap" size="small" :rules="rules">
                    <el-form-item label="授权号" prop="useCard.authorizationNumber">
                        <el-input v-model="formObj.useCard.authorizationNumber" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="使用单位" prop="useCard.apUiId">
                        <el-select v-model="formObj.useCard.apUiId" placeholder="请选择单位类型" disabled>
                            <el-option
                                v-for="item in unitList"
                                :key="item.apUiId"
                                :label="item.unitName"
                                :value="item.apUiId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权类型" prop="useCard.authorizationType">
                        <el-select v-model="formObj.useCard.authorizationType" placeholder="请选择授权类型" disabled>
                            <el-option
                                v-for="item in authTypeLists"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权时间" prop="useCard.authorizationTime">
                        <el-date-picker
                            disabled
                            v-model="formObj.useCard.authorizationTime"
                            type="datetime"
                            value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注" class="full">
                        <el-input v-model="formObj.useCard.remarks" placeholder="请输入备注" maxlength="200" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="附件" class="col-two" >
                        <!--                            <el-input v-model="formObj.attachment" placeholder="请选择附件"></el-input>-->
                        <!--                            limit 定义上传文件的个数-->
                        <!--                            on-exceed 定义超出限制时的行为-->
                        <!--                            可通过设置before-remove来阻止文件移除操作-->
<!--                        <el-upload-->
<!--                            class="upload-demo"-->
<!--                            action="/api/applyunit/upload"-->
<!--                            :on-preview="handlePreview"-->
<!--                            :on-remove="handleRemove"-->
<!--                            :before-remove="beforeRemove"-->
<!--                            multiple-->
<!--                            :limit="3"-->
<!--                            :headers="myHeader"-->
<!--                            :on-exceed="handleExceed"-->
<!--                            :on-success="uploadSuccess"-->
<!--                            :file-list="formObj.fileList">-->
<!--                            <el-button size="small" type="primary">点击上传</el-button>-->
<!--                            <div slot="tip" class="el-upload__tip"></div>-->
<!--                        </el-upload>-->
                        <upload-media type="file"
                                      ref="useCardUpdateFileUpload"
                                      :url="url"
                                      :busId="formObj.useCard.useCardId"
                                      :modelType="modelType"
                                      @onSuccess="saveEntity"
                                      :propsFileList="formObj.fileList"
                                      :isView=false>
                        </upload-media>
                    </el-form-item>
                </el-form>


            </div>
        </div>

        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">物业信息</div>
                    <div style="text-align: right;height: 50px;" class="full">
<!--                        <el-button type="primary" size="small" @click="showPropertyListInfo">添加物业</el-button>-->
<!--                        <el-button type="primary" size="small" @click="deletePropertys" plain>删除</el-button>-->
                    </div>
                    <el-table
                        :row-style="{height:'50px'}"
                        :data="formObj.useCardPropertyList"
                        @selection-change="handleSelectionChange"
                        style="width: 100%" class="full">
<!--                        <el-table-column-->
<!--                            type="selection"-->
<!--                            prop="cardPropertyId"-->
<!--                            width="55">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                            prop="roomId"-->
<!--                            label="房源编号">-->
<!--                        </el-table-column>-->
                        <el-table-column
                            prop="propertyId"
                            label="编号">
                        </el-table-column>
                        <el-table-column
                            prop="propertyName"
                            label="物业名称">
                        </el-table-column>
                        <el-table-column
                            prop="propertyRightStr"
                            label="物业产权">
                        </el-table-column>
                        <el-table-column
                            prop="propertyAddress"
                            label="物业地址">
                        </el-table-column>
                        <el-table-column
                            prop="addressArea"
                            label="物业面积">
                        </el-table-column>
                        <el-table-column
                            prop="startTime"
                            label="开始时间">
                            <template slot-scope="scope">
                                <el-date-picker
                                    v-model="scope.row.startTime" disabled
                                    type="date"
                                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="endTime"
                            label="结束时间">
                            <template slot-scope="scope">
                                <el-date-picker
                                    v-model="scope.row.endTime" disabled
                                    type="date"
                                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="authorizationUse"
                            label="授权用途">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.authorizationUse" disabled>
                                    <el-option
                                        v-for="item in authorizationUseList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="practicalUse"
                            label="实际用途">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.practicalUse"  disabled>
                                    <el-option
                                        v-for="item in practicalUseList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="useStatus" :formatter="dictVal_useStatus"
                            label="使用状态">
                        </el-table-column>
                        <el-table-column
                            prop="remarks"
                            label="备注">
                        </el-table-column>
<!--                        <el-table-column label="操作">-->
<!--                            <template slot-scope="scope">-->
<!--                                <el-button type="text" @click="changUseStatus(scope)" >回收/使用</el-button>-->
<!--                                <el-button type="text" @click="deleteProperty(scope)" >删除</el-button>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                    </el-table>
            </div>
        </div>




        <div slot="foot" style="text-align: center">
            <el-button type="primary" size="small" @click="goBack()" style="width: 80px" plain>返回</el-button>
        </div>
        <property-list ref="propertyList"></property-list>
    </div>
</template>
<script src='./use-card-detail.js'>
</script>

<style scoped lang="scss">
    @import "../style/common";
    @include formWrap(4);
</style>
